<template>
  <div class="pageContent padding-trbl-20 margin-b-60">
    <div class="modular_1">
      <!-- 部门报表 -->
      <div class="flex-row">
        <el-card class="box-card card3Box width100 bord_5" style="padding: 0;">
          <div class="flexrt">
            <el-button size="mini" type="primary" @click="reportFormToggle"
              >部门报表</el-button
            >
          </div>
        </el-card>
      </div>
      <!-- 工单情况统计 -->
      <div class="flex-row margin-t-20">
        <el-card class="box-card  width100">
          <Title class="title_color" title="工单情况统计"></Title>
          <div class="padding-l-30 margin-t-60 flex-row row-between">
            <div
              class="orderStateItem border-right padding-r-30 padding-l-30"
              v-for="(item, index) in orderState"
              :key="index"
              :class="index == 0 || index == 2 || index == 6 ? 'pointer' : ''"
              @click="
                index == 0 || index == 2 || index == 6
                  ? orderTO(
                      'year',
                      index == 2 ? 'chaoqiwancheng' : null,
                      index == 6 ? true : null
                    )
                  : ''
              "
            >
              <div class="font-14 text-gray">{{ item.title }}</div>
              <div class="font-46" :style="{ color: orderStateColor[index] }">
                {{ item.number }}
                <span
                  class="font-14 text-gray line-block"
                  v-if="index == 0 || index == 2 || index == 6"
                  >件</span
                >
                <span
                  class="font-14 text-gray line-block"
                  v-if="index == 1 || index == 4 || index == 5"
                  >%</span
                >
                <span class="font-14 text-gray line-block" v-if="index == 3"
                  >天</span
                >
              </div>
              <LineProgress
                class="margin-t-40"
                :title="item.state ? '环比去年增长' : '环比去年下降'"
                :percentage="item.percentage >= 100 ? 100 : item.percentage"
                :showtextVal="item.showTextVal"
                :showtext="false"
                :strokeWidth="10"
                titleColor="#5673ca"
                :percentageColor="item.percentageColor"
                :icon="item.icon"
                :type="index == 3 ? 'hfzq' : ''"
              ></LineProgress>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 工单办理量统计 -->
      <div class="flex-row margin-t-20">
        <el-card class="box-card card2Box margin-r-20">
          <Title class="title_color" title="工单办理量统计"></Title>
          <div class="flex-row row-between padding-lr-30">
            <div
              class="wordOrderItem text-white padding-lr-30 rela pointer"
              @click="orderTO('year')"
            >
              <div class="content abso abso-center rela">
                <div class="font-24">本年</div>
                <div class="margin-t-10">
                  <span class="font-42">{{ getGdblltj_r.gdbblCurY }}</span> 件
                </div>
                <div>
                  <LineProgress
                    class="margin-t-10"
                    :title="
                      getGdblltj_r.addY == true
                        ? '环比去年增长'
                        : '环比去年下降'
                    "
                    :percentage="
                      getGdblltj_r.hbqnYPct >= 100 ? 100 : getGdblltj_r.hbqnYPct
                    "
                    :showtextVal="getGdblltj_r.showtextYPct"
                    :showtext="false"
                    :strokeWidth="10"
                    titleColor="#ffffff"
                    percentageColor="#ffffff"
                    :icon="getGdblltj_r.addY ? 'rise2' : 'decline2'"
                    trendImgColor="white"
                  ></LineProgress>
                </div>
              </div>
              <div class="card_shadow abso">
                <img
                  src="../../../assets/images/card_shadow01.png"
                  class="width100"
                />
              </div>
            </div>
            <div
              class="wordOrderItem text-white padding-lr-30 rela pointer"
              @click="orderTO('month')"
            >
              <div class="content abso abso-center rela">
                <div class="font-24">本月</div>
                <div class="margin-t-10">
                  <span class="font-42">{{ getGdblltj_r.gdbblCurM }}</span> 件
                </div>
                <div>
                  <LineProgress
                    class="margin-t-10"
                    :title="getGdblltj_r.addM ? '环比上月增长' : '环比上月下降'"
                    :percentage="
                      getGdblltj_r.gdbblCurM == 0
                        ? 0
                        : getGdblltj_r.hbqnMPct >= 100
                        ? 100
                        : getGdblltj_r.hbqnMPct
                    "
                    :showtextVal="
                      getGdblltj_r.gdbblCurM == 0
                        ? 0
                        : getGdblltj_r.showtextMPct
                    "
                    :showtext="false"
                    :strokeWidth="10"
                    titleColor="#ffffff"
                    percentageColor="#ffffff"
                    :icon="getGdblltj_r.addM ? 'rise2' : 'decline2'"
                    trendImgColor="white"
                  ></LineProgress>
                </div>
              </div>
              <div class="card_shadow abso">
                <img
                  src="../../../assets/images/card_shadow02.png"
                  class="width100"
                />
              </div>
            </div>
            <div
              class="wordOrderItem text-white padding-lr-30 rela pointer"
              @click="orderTO('date')"
            >
              <div class="content abso abso-center rela">
                <div class="font-24">本日</div>
                <div class="margin-t-10">
                  <span class="font-42">{{ getGdblltj_r.gdbblCurD }}</span> 件
                </div>
                <div>
                  <LineProgress
                    class="margin-t-10"
                    :title="getGdblltj_r.addD ? '环比昨日增长' : '环比昨日下降'"
                    :percentage="
                      getGdblltj_r.hbqnDPct >= 100 ? 100 : getGdblltj_r.hbqnDPct
                    "
                    :showtextVal="getGdblltj_r.showtextDPct"
                    :showtext="false"
                    :strokeWidth="10"
                    titleColor="#ffffff"
                    percentageColor="#ffffff"
                    :icon="getGdblltj_r.addD ? 'rise2' : 'decline2'"
                    trendImgColor="white"
                  ></LineProgress>
                </div>
              </div>
              <div class="card_shadow abso">
                <img
                  src="../../../assets/images/card_shadow03.png"
                  class="width100"
                />
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="box-card card1Box">
          <Title class="title_color" title="今日预警件统计"></Title>
          <div class="card1 flex-row padding-l-20">
            <div class="card1_r flex-row">
              <div
                class="index_card1Echart margin-r-40"
                id="index_card1Echart"
              ></div>
              <div class="card1EchartList">
                <div
                  class="card1EchartItem flex-row pointer"
                  :class="index < 2 ? 'margin-b-20' : ''"
                  v-for="(item, index) in workOrderNumber"
                  :key="index"
                  @click="
                    orderListChange(
                      'year',
                      item.name == '已超期件' ? 'chaoqituijin' : 'jijiangchaoqi'
                    )
                  "
                >
                  <div
                    class="card1EchartItem_l font-12 padding-l-20 line_he rela text-gray"
                  >
                    <span
                      class="abso"
                      :class="{
                        'bg-pure-red': index == 0,
                        'bg-orange': index == 2,
                        'bg-rose-red1': index == 1
                      }"
                    ></span
                    >{{ item.name }}
                  </div>
                  <div class="card1EchartItem_c font-14 text-right text-gray">
                    <span
                      class="font-24 text-light-oragen line-block"
                      :class="{
                        'text-pure-red': index == 0,
                        'text-rose-red1': index == 1,
                        'text-orange': index == 2
                      }"
                      >{{ item.value }}</span
                    >件
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 超期件、重复件 -->
      <div class="flex-row margin-t-20">
        <el-card class="box-card card6Box margin-r-20">
          <div class="cardTitleBox rela">
            <Title :title="`${overdue.List[overdue.index].label}统计`"></Title>
            <div class="cardMore text-dark-gray font-12 abso pointer">
              <el-select
                size="mini"
                class="overdue"
                v-model="overdue.model"
                placeholder="请选择"
                @change="getBmCqjfl"
              >
                <el-option
                  v-for="item in overdue.List"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="card1 flex-row padding-l-20">
            <div class="card1_r flex-row">
              <div
                class="index_card1Echart margin-r-40"
                id="index_card1Echart2"
              ></div>
              <div class="card1EchartList">
                <div
                  class="card1EchartItem flex-row pointer margin-b-10"
                  v-for="(item, index) in cqjOrderNumber"
                  :key="index"
                  @click="orderListChange('year', item, 'select')"
                >
                  <div
                    class="card1EchartItem_l font-12 padding-l-20 rela text-gray"
                  >
                    <span
                      class="abso"
                      :style="{
                        backgroundColor: comColor(index)
                      }"
                    ></span
                    >{{ item.name }}
                  </div>
                  <div
                    class="card1EchartItem_c font-14 flex col-center row-around text-right text-gray"
                  >
                    <span
                      class="font-24 text-light-oragen line-block"
                      :style="{
                        color: comColor(index)
                      }"
                      >{{ item.value }}</span
                    >件
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="box-card card7Box">
          <div class="cardTitleBox rela">
            <Title title="重复件统计"></Title>
            <div
              class="cardMore text-dark-gray font-12 abso pointer"
              @click="maskToggle('repeat')"
            >
              更多<i class="el-icon-d-arrow-right"></i>
            </div>
          </div>
          <div class="margin-l-30 margin-t-30">
            <div
              class="text-dark-gray font-14 text-center"
              style="margin-top: 100px;"
              v-if="repeatList == ''"
            >
              暂无数据
            </div>
            <template v-for="(item, index) in repeatList">
              <div
                class="replatItem rela pointer"
                :class="[index > 0 ? 'margin-t-10' : '']"
                :key="index"
                v-if="index < 6"
                @mouseover="repeatMouseover(index)"
                @mouseout="repeatMouseout"
                @click="orderListChange('year', item, 'sjh')"
              >
                <div class="titleBox flex-row row-between">
                  <div class="title text-cut font-14 text-gray">
                    {{ item.ldr }} {{ item.sjh }} - {{ item.content }}
                  </div>
                </div>
                <CustomGraphical
                  :progressWidth="
                    Math.round((item.number / (maxRepeat + 10)) * 100)
                  "
                  :number="item.number"
                ></CustomGraphical>
                <div
                  class="repeatContentBox abso text-white"
                  v-if="replatShowIndex == index && !maskShow"
                >
                  <div class="text-line-cut repeatContent">
                    {{ item.content }}
                  </div>
                  <div class="sanjiao_down abso"></div>
                </div>
              </div>
            </template>
          </div>
        </el-card>
      </div>
      <!-- 工单来源 -->
      <div class="flex-row margin-t-20">
        <el-card class="box-card card8Box width100 rela">
          <Title title="工单来源统计"></Title>
          <div class="text-gray font-12 company abso">
            单位：件
          </div>
          <div
            class="index_card5Echart margin-t-40"
            id="index_card5Echart"
          ></div>
        </el-card>
      </div>
      <!-- 部门人员办理量统计 -->
      <div class="flex-row margin-t-20">
        <el-card class="box-card card8Box width100 rela">
          <Title title="部门人员办理量统计"></Title>
          <div class="text-gray font-12 company abso">
            单位：件
          </div>
          <div
            class="index_card5Echart margin-t-40"
            id="index_card6Echart"
          ></div>
        </el-card>
      </div>

      <!-- 部门超期件月度统计 -->
      <div class="flex-row margin-t-20">
        <el-card class="box-card card8Box width100 rela">
          <Title title="部门超期件月度统计"></Title>
          <div class="text-gray font-12 company abso">
            单位：件
          </div>
          <div
            class="index_card5Echart margin-t-40"
            id="index_card7Echart"
          ></div>
        </el-card>
      </div>
      <!-- 全年月度工单处理量统计 -->
      <div class="flex-row margin-t-20">
        <el-card class="box-card card8Box width100 rela">
          <Title class="title_color" title="全年月度工单处理量统计"></Title>
          <div class="text-gray font-12 company abso">
            单位：件
          </div>
          <div class="card8Echart" id="card8Echart"></div>
          <div class="echartLegendList flex-row font-12 text-gray abso">
            <el-select v-model="yearMoth.model" @change="getBmYd">
              <el-option
                v-for="(item, index) in yearMoth.List"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 重复事件更多 -->
    <div class="maskBox" v-if="maskShow">
      <div class="maskContentBox bg-white rela padding-trbl-20">
        <div class="closeMask abso pointer" @click="maskToggle">
          <i class="el-icon-close"></i>
        </div>
        <div class="maskContent margin-t-40">
          <div class="hotEvents margin-l-30 margin-t-30 margin-r-30">
            <div
              class="text-dark-gray font-14 text-center"
              style="margin-top: 100px;"
              v-if="repeatList == ''"
            >
              暂无数据
            </div>
            <template v-for="(item, index) in repeatList">
              <div
                class="hotEventsItem rela pointer"
                :key="index"
                @mouseover="repeatMouseover(index)"
                @mouseout="repeatMouseout"
                @click="orderListChange('quarter', '', item.sjh)"
              >
                <lineProgress1
                  class="margin-t-10"
                  :title="item.title"
                  :number="item.number"
                  :percentage="
                    Math.round((item.number / (maxRepeat + 5)) * 100)
                  "
                  :roundLeft="1"
                  :showtext="false"
                  :strokeWidth="10"
                ></lineProgress1>
                <div
                  class="repeatContentBox abso text-white"
                  v-if="replatShowIndex == index && maskShow"
                >
                  <div class="text-line-cut repeatContent">
                    {{ item.content }}
                  </div>
                  <div class="sanjiao_down abso"></div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <Pagination
          class="Pagination"
          :totalSize="totalSize"
          :current="currentPage.current"
          :size="currentPage.size"
          @pageChange="currentPageChange"
          @sizeChange="currentSizeChange"
        ></Pagination>
      </div>
    </div>
    <!-- 工单列表 -->
    <el-dialog
      title="工单列表"
      :visible.sync="orderListShow"
      width="100%"
      :fullscreen="fullScreen"
      @close="clearSearch"
    >
      <orderList
        v-if="orderListShow"
        ref="orderlist"
        :duration="duration"
        :date="date"
        :sourceId="sourceId"
        :majorCatId="majorCatId"
        :deptId="deptId"
        :orderDataType="orderDataType"
        :orderType="orderType"
        :multiDiliver="multiDiliver"
        :empId="empId"
        :bumanyi="bumanyi"
        :sjh="sjh"
      ></orderList>
    </el-dialog>
    <!-- 月报 -->
    <reportForm
      :exportFormData="exportFormData"
      :dateTime="dateTime"
      v-if="reportFormShow"
      @reportFormHide="reportFormToggle"
    ></reportForm>
  </div>
</template>

<script>
import Title from '../../../components/title.vue'
import LineProgress from '../../../components/lineProgress/lineProgress.vue'
import lineProgress2 from '../../../components/lineProgress/lineProgress2.vue'
import * as echarts from 'echarts'
import Pagination from '../../../components/pagination.vue'
import orderList from '../reportform/order/orderlist.vue'
import CustomGraphical from '../../../components/customGraphical/customGraphical1.vue'
// 报表
import reportForm from '@/components/monthlyReport.vue'
import { sort, stopBodyScroll } from '@/assets/js/public.js'

import LineProgress1 from '../../../components/lineProgress/lineProgress1.vue'
import '@/assets/css/global.less'
let userInfoID = null
export default {
  components: {
    Title,
    LineProgress,
    lineProgress2,
    orderList,
    CustomGraphical,
    reportForm,
    LineProgress1,
    Pagination
  },
  data () {
    return {
      // 工单办理量 左
      getGdblltj_l: [],
      // 预警件 左 环形图
      workOrderNumber: [],
      // 工单办理量 右
      getGdblltj_r: {},
      // 工单情况统计
      orderState: [],
      orderStateColor: [
        '#9865ff',
        '#35ca1c',
        '#ff3a3a',
        '#6d9fff',
        '#ff902e',
        '#35ca1c',
        '#ff39d7'
      ],
      systemYear: '',
      monthList: [
        '01月',
        '02月',
        '03月',
        '04月',
        '05月',
        '06月',
        '07月',
        '08月',
        '09月',
        '10月',
        '11月',
        '12月'
      ],
      tjList: [],
      card4Data: [],
      orderListShow: false,
      fullScreen: true,
      duration: null,
      date: null,
      majorCatId: null,
      sourceId: null,
      deptId: null,
      orderDataType: 'chaoqiwancheng',
      bumanyi: null,
      sjh: null,
      orderType: null,
      multiDiliver: null,
      empId: null,
      // 热点事件
      hotEventsCount: 0,
      hotEvents: [],
      hotSortArray: [],
      maxHot: 0,
      // 重复事件
      repeatList: [],
      replatShowIndex: -1,
      replatSortArray: [],
      maxRepeat: 0,
      currentPage: {
        current: 1,
        size: 20
      },
      exportFormData: [],
      dateTime: '',
      reportFormShow: false,
      maskShow: false,
      // 超期件分类统计下拉
      overdue: {
        List: [
          {
            value: 'chaoqiwancheng',
            label: '超期件分类'
          },
          {
            value: 'bumanyi',
            label: '不满意件分类'
          },
          {
            value: 'tuihui',
            label: '退单率分类'
          }
        ],
        model: 'chaoqiwancheng',
        index: 0
      },
      // 超期数据
      getBmcqj: [],
      cqjOrderNumber: [],
      // 年份列表
      yearList: [],
      yearMoth: {
        List: [
          {
            value: 'gongdan',
            label: '工单处理量'
          },
          {
            value: 'tuihui',
            label: '退单件'
          }
        ],
        model: 'gongdan'
      },
      sourceList: [
        { id: '10000', label: '市长信箱' },
        { id: '12306', label: '市人社局长信箱' },
        { id: '12333', label: '信访信息系统' },
        { id: '10010', label: '大联动' },
        { id: '12388', label: '人民网' },
        { id: '12580', label: '企业服务网' },
        { id: '10086', label: '公众信息网' }
      ]
    }
  },
  mounted () {
    userInfoID = JSON.parse(
      window.sessionStorage.getItem('GOVERNANCE_USER_INFO')
    )
    this.majorCatId = userInfoID.majorCatId
    const date = new Date()
    this.dateTime =
      date.getFullYear() +
      '年' +
      parseInt(date.getMonth() + 1) +
      '月' +
      date.getDate() +
      '日'
    console.log(date.getMonth())

    this.systemYear = date.getFullYear()
    this.yearList = [date.getFullYear() - 1, date.getFullYear()]
    this.getGdqktj()
    this.getGdblltjR()
    this.getGdblltjL()
    this.getBmCqjfl()
    this.getBmCfj()
    this.getBmGdly()
    this.getBmRybll()
    this.getBmCqj()
    this.getBmYd()
  },
  methods: {
    // 获取数据 工单情况统计
    async getGdqktj () {
      this.$axios.post(this.$api.homeCharts.getBmGdqktj).then(res => {
        if (res) {
          this.orderState = [
            {
              title: '办理量',
              number: res.gdbblCurY,
              showTextVal: parseFloat(res.hbqnYPct.toFixed(2)).toString(),
              percentage: Math.round(res.hbqnYPct),
              state: res.addY,
              percentageColor: res.addY ? '#35ca1c' : '#ff3a3a',
              icon: res.addY ? 'rise' : 'decline'
            },
            {
              title: '满意率',
              number: res.curMydPct,
              showTextVal: parseFloat(res.hbqnMydYPct.toFixed(2)).toString(),
              percentage: Math.round(res.hbqnMydYPct),
              state: res.addMydY,
              percentageColor: res.addMydY ? '#35ca1c' : '#ff3a3a',
              icon: res.addMydY ? 'rise' : 'decline'
            },
            {
              title: '超期件',
              number: res.curCqj,
              showTextVal: parseFloat(res.hbqnCqjYPct.toFixed(2)).toString(),
              percentage: Math.round(res.hbqnCqjYPct),
              state: res.addCqjY,
              percentageColor: res.addCqjY ? '#ff3a3a' : '#35ca1c',
              icon: res.addCqjY ? 'rise3' : 'decline3'
            },
            {
              title: '平均回复周期',
              number: res.curAvgHf,
              showTextVal: parseFloat(
                Math.abs(res.hbqnAvgHfYPct.toFixed(2))
              ).toString(),
              percentage: Math.round(res.hbqnAvgHfYPct),
              state: res.addAvgHfY,
              percentageColor: res.addAvgHfY ? '#ff3a3a' : '#35ca1c',
              icon: res.addAvgHfY ? 'rise3' : 'decline3'
            },
            {
              title: '退单率',
              number: res.curThlPct,
              showTextVal: parseFloat(res.hbqnThlYPct.toFixed(2)).toString(),
              percentage: Math.round(res.hbqnThlYPct),
              state: res.addThlY,
              percentageColor: res.addThlY ? '#ff3a3a' : '#35ca1c',
              icon: res.addThlY ? 'rise3' : 'decline3'
            },
            {
              title: '办结率',
              number: res.curBjlPct,
              showTextVal: parseFloat(res.hbqnBjlYPct.toFixed(2)).toString(),
              percentage: Math.round(res.hbqnBjlYPct),
              state: res.addBjlY,
              percentageColor: res.addBjlY ? '#35ca1c' : '#ff3a3a',
              icon: res.addBjlY ? 'rise' : 'decline'
            },
            {
              title: '多次下发',
              number: res.multi,
              showTextVal: parseFloat(res.multiHuanbi.toFixed(2)).toString(),
              percentage: Math.round(res.multiHuanbi),
              state: res.multiAdd,
              percentageColor: res.multiAdd ? '#ff3a3a' : '#35ca1c',
              icon: res.multiAdd ? 'rise3' : 'decline3'
            }
          ]
        }
      })
    },

    // 获取数据 工单办理量
    async getGdblltjR () {
      this.$axios.post(this.$api.homeCharts.getBmGdblltjR).then(res => {
        if (res) {
          this.getGdblltj_r = res
          this.getGdblltj_r.showtextYPct = parseFloat(
            res.hbqnYPct.toFixed(2)
          ).toString()
          this.getGdblltj_r.showtextMPct = parseFloat(
            res.hbqnMPct.toFixed(2)
          ).toString()
          this.getGdblltj_r.showtextDPct = parseFloat(
            res.hbqnDPct.toFixed(2)
          ).toString()
          this.getGdblltj_r.hbqnYPct = Math.round(res.hbqnYPct)
          this.getGdblltj_r.hbqnMPct = Math.round(res.hbqnMPct)
          this.getGdblltj_r.hbqnDPct = Math.round(res.hbqnDPct)
        }
      })
    },
    // 获取数据 今日预警件统计
    async getGdblltjL () {
      const that = this
      this.$axios.post(this.$api.homeCharts.getBmGdblltj_y).then(res => {
        if (res) {
          that.getGdblltj_l = res
          that.getGdblltj_l.hbqnPct = parseFloat(
            res.hbqnPct.toFixed(2)
          ).toString()
          that.getGdblltj_l.hbqnPct = Math.round(res.hbqnPct)
          that.workOrderNumber = [
            { value: res.cqtj, name: '已超期件' },
            { value: res.wqs, name: '未分发' },
            { value: res.jjcq, name: '即将超期' }
          ]
          const sy_chartDom5 = document.getElementById('index_card1Echart')
          const sy_myChart5 = echarts.init(sy_chartDom5)
          const sy_option5 = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              show: false,
              top: '0px',
              left: 'left',
              orient: 'vertical'
            },
            series: [
              {
                type: 'pie',
                name: '预警件',
                color: ['#ff5858', '#ff2dd5', '#ff902d'],
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                legendHoverLink: false,
                itemStyle: {
                  borderRadius: 0,
                  borderColor: '#fff',
                  borderWidth: 5
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: false,
                    fontSize: '40',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: this.workOrderNumber
              }
            ]
          }
          sy_option5 && sy_myChart5.setOption(sy_option5)
          setTimeout(function () {
            window.onresize = function () {
              sy_myChart5.resize()
            }
          }, 200)
          sy_myChart5.on('click', function (params) {
            if (params.name == '已超期件') {
              that.orderListChange('year', 'chaoqituijin')
            } else if (params.name == '即将超期') {
              that.orderListChange('year', 'jijiangchaoqi')
            }
          })
        }
      })
    },

    // 超期件分类-不满意--退单 统计
    async getBmCqjfl () {
      this.overdue.List.map((item, index) => {
        if (this.overdue.model == item.value) {
          this.overdue.index = index
        }
      })
      let res = []
      this.cqjOrderNumber = []
      this.getBmcqj = []
      let that = this
      if (this.overdue.model == 'chaoqiwancheng') {
        res = await this.$api.getBmCqjfl()
      } else if (this.overdue.model == 'bumanyi') {
        res = await this.$api.getBmBmyjfl()
      } else if (this.overdue.model == 'tuihui') {
        res = await this.$api.getBmTdfl()
      }
      if (res) {
        that.getBmcqj = res.map(item => {
          that.cqjOrderNumber.push({
            value: item.count,
            name: item.majorCatName,
            majorCatId: item.majorCatId,
            pct: item.pct
          })
          return item
        })
        const sy_chartDom5 = document.getElementById('index_card1Echart2')
        const sy_myChart5 = echarts.init(sy_chartDom5)
        const sy_option5 = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false,
            top: '0px',
            left: 'left',
            orient: 'vertical'
          },
          series: [
            {
              type: 'pie',
              name: '预警件',
              color: ['#835dfe', '#4cf53a', '#ff2dd8', '#39dcf3', '#f6bd38'],
              radius: ['40%', '60%'],
              avoidLabelOverlap: false,
              legendHoverLink: false,
              itemStyle: {
                borderRadius: 0,
                borderColor: '#fff',
                borderWidth: 5
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: that.cqjOrderNumber
            }
          ]
        }
        sy_option5 && sy_myChart5.setOption(sy_option5)
        setTimeout(function () {
          window.onresize = function () {
            sy_myChart5.resize()
          }
        }, 200)
        sy_myChart5.on('click', function (params) {
          that.orderListChange('year', params.data)
        })
      }
    },

    // 获取数据 重复件统计
    async getBmCfj () {
      const res = await this.$api.getBmCfj(this.currentPage)
      if (res) {
        if (this.currentPage.current == 1) {
          this.repeatList = []
          this.replatSortArray = []
        }
        res.records.forEach((item, index) => {
          this.replatSortArray.push(item.count)
          let obj = {
            ldr: item.ldr,
            sjh: item.sjh,
            content: item.content,
            number: item.count,
            title: item.ldr + ' ' + item.sjh + ' - ' + item.content
          }
          this.repeatList.push(obj)
        })
        this.maxRepeat = sort(this.replatSortArray)[0]
        this.totalSize = res.total
      }
    },

    //  获取数据 工单来源统计
    async getBmGdly () {
      const that = this
      const res = await this.$api.getBmGdly()
      if (res) {
        let data1 = []
        let countList = []
        res.forEach(item => {
          data1.push(item.typeName)
          countList.push(item.count)
        })
        // 工单来源统计
        const sy_chartDom2 = document.getElementById('index_card5Echart')
        const sy_myChart2 = echarts.init(sy_chartDom2)
        const sy_option2 = {
          color: ['#8663ff'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (params) {
              // 鼠标悬浮显示的字符串内容
              let total = 0
              params.forEach(item => {
                total += item.value
              })
              return (
                params[0].name +
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: #8565ff;margin-right:5px;"></span>总计<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                params[0].value +
                '</span><span style="font-size: 10px;"> 件</span>'
              )
            }
          },
          color: '#8565ff',
          grid: {
            left: '25px',
            right: '25px',
            bottom: '40px',
            top: '20px',
            containLabel: true
          },
          textStyle: {
            color: '#666'
          },
          xAxis: [
            {
              type: 'category',
              data: data1,
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                interval: 0, // 标签设置为全部显示
                formatter: function (params) {
                  var newParamsName = '' // 最终拼接成的字符串
                  var paramsNameNumber = params.length // 实际标签的字数
                  var provideNumber = 8 // 每行能显示的字的个数
                  var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                  /**
                   * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                   */
                  // 条件等同于rowNumber>1
                  if (paramsNameNumber > provideNumber) {
                    /** 循环每一行,p表示行 */
                    for (var p = 0; p < rowNumber; p++) {
                      var tempStr = '' // 表示每一次截取的字符串
                      var start = p * provideNumber // 开始截取的位置
                      var end = start + provideNumber // 结束截取的位置
                      // 此处特殊处理最后一行的索引值
                      if (p == rowNumber - 1) {
                        // 最后一次不换行
                        tempStr = params.substring(start, paramsNameNumber)
                      } else {
                        // 每一次拼接字符串并换行
                        tempStr = params.substring(start, end) + '\n'
                      }
                      newParamsName += tempStr // 最终拼成的字符串
                    }
                  } else {
                    // 将旧标签的值赋给新标签
                    newParamsName = params
                  }
                  // 将最终的字符串返回
                  return newParamsName
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              min: 5
            }
          ],
          color: ['#8565ff', '#511cea', '#d565ff'],
          series: [
            {
              name: '总计',
              type: 'bar',
              stack: 'Ad',
              barWidth: '30px',
              data: countList,
              label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                  if (countList[params.dataIndex] > 0) {
                    return countList[params.dataIndex]
                  } else {
                    return ''
                  }
                },
                color: '#8565ff'
              }
            }
          ]
        }
        sy_option2 && sy_myChart2.setOption(sy_option2)
        window.addEventListener('resize', () => {
          sy_myChart2.resize()
        })
        sy_myChart2.on('click', function (param) {
          that.sourceList.forEach(item => {
            if (param.name === item.label) {
              that.sourceId = item.id
              that.orderListChange('year')
            }
          })
        })
      }
    },
    //  获取数据 部门人员办理量统计
    async getBmRybll () {
      const that = this
      const res = await this.$api.getBmRybll()
      if (res) {
        // 上月
        let lastMonth = []
        // 本月
        let montharr = []
        // 名称
        let monthName = []
        res.map(item => {
          lastMonth.push(item.lastCount)
          montharr.push(item.count)
          monthName.push(item.name)
        })
        // 工单来源统计
        const sy_chartDom2 = document.getElementById('index_card6Echart')
        const sy_myChart2 = echarts.init(sy_chartDom2)
        const dateTime = new Date()
        const sy_option2 = {
          color: ['#7773d4', '#33d7e1'],
          legend: {
            selectedMode: false,
            x: 'right',
            y: '0px',
            icon: 'rect', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，noneit
            itemWidth: 10, // 设置宽度class
            itemHeight: 10, // 设置高度im
            itemGap: 40 // 设置间距i
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            show: true
          },
          grid: {
            show: true,
            left: '25px',
            right: '25px',
            bottom: '50px',
            top: '20px',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: monthName
            }
          ],

          yAxis: [
            {
              type: 'value'
            }
          ],
          dataZoom: [
            {
              type: 'slider',
              show: true,
              height: 30,
              xAxisIndex: [0],
              bottom: 0,
              handleIcon:
                'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
              handleSize: '100%',
              handleStyle: {
                color: '#dce2eb'
              },
              textStyle: {
                color: '#303030'
              },
              fillerColor: '#dce2eb',
              borderColor: '#eceef0',
              start: 0,
              end: 100
            }
          ],
          series: [
            {
              name: `${
                dateTime.getMonth() == '0' ? 12 : dateTime.getMonth()
              }月`,
              barWidth: 20,
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: lastMonth,
              label: {
                show: true,
                fontSize: 12,
                position: 'top',
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value
                  } else {
                    return ''
                  }
                }
              }
            },
            {
              name: `${dateTime.getMonth() + 1}月`,
              barWidth: 20,
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: montharr,
              label: {
                show: true,
                fontSize: 12,
                position: 'top',
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value
                  } else {
                    return ''
                  }
                }
              }
            }
          ]
        }
        sy_option2 && sy_myChart2.setOption(sy_option2)
        window.addEventListener('resize', () => {
          sy_myChart2.resize()
        })
        sy_myChart2.on('click', function (param) {
          const mon = [
            {
              text: '1月',
              number: '01'
            },
            {
              text: '2月',
              number: '02'
            },
            {
              text: '3月',
              number: '03'
            },
            {
              text: '4月',
              number: '04'
            },
            {
              text: '5月',
              number: '05'
            },
            {
              text: '6月',
              number: '06'
            },
            {
              text: '7月',
              number: '07'
            },
            {
              text: '8月',
              number: '08'
            },
            {
              text: '9月',
              number: '09'
            },
            {
              text: '10月',
              number: '10'
            },
            {
              text: '11月',
              number: '11'
            },
            {
              text: '12月',
              number: '12'
            }
          ]
          // 用户查询
          res.map(item => {
            if (item.name == param.name) {
              that.empId = item.userid
            }
          })

          let month = JSON.parse(JSON.stringify(that.systemYear))
          if (that.data == '12') {
            month - 1
          }
          // 时间
          mon.map(item => {
            if (item.text == param.seriesName) {
              that.date = month + '-' + item.number
            }
          })
          that.sourceList.forEach(item => {
            if (param.name === item.label) {
              that.sourceId = item.id
            }
          })
          that.orderListChange('month')
        })
      }
    },

    //  获取数据 部门超期件月度统计
    async getBmCqj () {
      const that = this
      const res = await this.$api.getBmCqj()
      if (res) {
        // 工单来源统计
        const sy_chartDom2 = document.getElementById('index_card7Echart')
        const sy_myChart2 = echarts.init(sy_chartDom2)
        const sy_option2 = {
          color: ['#7773d4', '#33d7e1'],
          legend: {
            selectedMode: false,
            x: 'right',
            y: '0px',
            icon: 'rect', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，noneit
            itemWidth: 10, // 设置宽度class
            itemHeight: 10, // 设置高度im
            itemGap: 40 // 设置间距i
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: '#666666',
            textStyle: {
              // 文字样式
              color: '#fff',
              decoration: 'none',
              fontFamily: 'Verdana, sans-serif'
            },
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#8e5dff'
              }
            },
            show: true
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [
                '01月',
                '02月',
                '03月',
                '04月',
                '05月',
                '06月',
                '07月',
                '08月',
                '09月',
                '10月',
                '11月',
                '12月'
              ]
            }
          ],

          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: res[0].year,
              barWidth: 20,
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: res[0].data,
              label: {
                show: true,
                fontSize: 12,
                position: 'top',
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value
                  } else {
                    return ''
                  }
                }
              }
            },
            {
              name: res[1].year,
              barWidth: 20,
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: res[1].data,
              label: {
                show: true,
                fontSize: 12,
                position: 'top',
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value
                  } else {
                    return ''
                  }
                }
              }
            }
          ]
        }
        sy_option2 && sy_myChart2.setOption(sy_option2)
        window.addEventListener('resize', () => {
          sy_myChart2.resize()
        })
        sy_myChart2.on('click', function (param) {
          that.date =
            param.seriesName + '-' + param.name.slice(0, param.name.length - 1)
          that.orderType = 'chaoqiwancheng'
          that.orderListChange('month')
        })
      }
    },

    // 获取数据 全年月度工单处理量统计
    async getBmYd () {
      const that = this
      let res = null
      if (this.yearMoth.model == 'tuihui') {
        res = await that.$api.getBmYdtd(that.systemYear)
        that.orderType = 'tuihui'
      } else {
        res = await that.$api.getBmYd(that.systemYear)
        that.orderType = ''
      }
      const sy_chartDom3 = document.getElementById('card8Echart')
      const sy_myChart3 = echarts.init(sy_chartDom3)
      const sy_option3 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#8e5dff'
            }
          },
          formatter: function (params) {
            let res = params[0].name
            const colorList = ['#a0c1ff', '#cb501d']
            params.forEach((item, index) => {
              res +=
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
                colorList[index] +
                ';margin-right:5px;"></span>' +
                that.yearList[index] +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                item.value +
                '</span><span style="font-size: 10px;"> 件</span>'
            })

            return res
          }
        },
        legend: {
          selectedMode: false,
          x: '75%',
          y: '3%',
          icon: 'rect', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，noneit
          itemWidth: 14, // 设置宽度class
          itemHeight: 14, // 设置高度im
          itemGap: 40, // 设置间距i
          textStyle: {
            fontSize: 14
          }
        },
        grid: {
          left: '25px',
          right: '20px',
          bottom: '10px',
          top: '70px',
          containLabel: true
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#a0c1ff' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#9e8eff' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#cb501d' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#cf14a6' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        ],
        itemStyle: {
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 5
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          offset: 10,
          data: this.monthList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '2021',
            type: 'line',
            data: res[0].data,
            smooth: true,
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(158, 178, 255,0.5)',
              shadowBlur: 10,
              shadowOffsetY: 8
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          },
          {
            name: '2022',
            type: 'line',
            data: res[1].data,
            smooth: true,
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(204, 71, 49,0.5)',
              shadowBlur: 10,
              shadowOffsetY: 8
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          }
        ]
      }
      sy_option3 && sy_myChart3.setOption(sy_option3)
      setTimeout(function () {
        window.onresize = function () {
          sy_myChart3.resize()
        }
      }, 100)
      sy_myChart3.on('click', function (param) {
        that.duration = 'month'
        that.deptId = userInfoID.deptId
        let date = param.seriesName + '-' + param.name.slice(0, 2)
        that.date = date
        if (that.yearMoth.model == 'tuihui') {
          that.orderType = 'tuihui'
        }
        that.orderListShow = true
      })
    },
    // 打开参数统一函数
    orderListChange (duration, item = null, type = null) {
      if (item) {
        if (item.name == '其他') {
          let catid = []
          catid = this.cqjOrderNumber.map(item => {
            return item.majorCatId
          })
          this.majorCatId = catid.filter(Boolean)
        } else {
          this.majorCatId = item.majorCatId
        }
      }
      // select：超期件分类统计
      // sjh：重复件统计
      switch (type) {
        case 'select':
          if (this.overdue.model == 'bumanyi') {
            this.bumanyi = true
          } else {
            this.orderType = this.overdue.model
          }
          break
        case 'sjh':
          this.sjh = item.sjh
          break
      }
      this.deptId = userInfoID.deptId
      // return
      // 年月日类型
      this.duration = duration
      // 是否多次下发
      // this.multiDiliver = multiDiliver
      this.orderListShow = true
    },
    orderTO(duration,orderType,multiDiliver){
      this.duration = duration
      this.orderType = orderType
      this.multiDiliver = multiDiliver
      this.deptId = userInfoID.deptId
      this.orderListShow = true

    },
    // 关闭弹窗重置参数
    clearSearch () {
      this.duration = null
      this.date = null
      this.orderType = null
      this.multiDiliver = null
      this.majorCatId = null
      this.deptId = null
      this.bumanyi = null
      this.sjh = null
      this.empId = null
      this.sourceId = null
    },

    repeatMouseout (index) {
      this.replatShowIndex = -1
    },
    reportFormToggle (param) {
      this.reportFormShow = param
      stopBodyScroll(false)
    },
    repeatMouseover (index) {
      this.replatShowIndex = index
    },
    // 分页
    maskToggle () {
      if (this.maskShow == false) {
        this.currentPage.current = 1
      }
      this.maskShow = !this.maskShow
      if (this.maskShow) {
        this.getBmCfj()
        stopBodyScroll(true)
      } else {
        stopBodyScroll(false)
      }
    },
    // 重复件
    currentPageChange (page) {
      this.currentPage.current = page
      this.getBmCfj()
    },
    currentSizeChange (size) {
      this.currentPage.size = size
      this.getRepeat()
    }
  },
  computed: {
    comColor () {
      return function (index) {
        const colorArr = ['#835dfe', '#4cf53a', '#ff2dd8', '#39dcf3', '#f6bd38']

        return index > colorArr.length ? colorArr[0] : colorArr[index]
      }
    }
  }
}
</script>

<style lang="less" scoped>
// @import '../../../assets/css/global.less';
.pageContent {
  .modular_1 {
    .card1Box {
      width: 750px;
    }
    .card2Box {
      width: 1110px;
    }
    .card1Box,
    .card2Box {
      height: 294px;
      .card1 {
        .index_card1Echart {
          width: 240px;
          height: 240px;
        }
        .card1EchartList {
          .card1EchartItem_l {
            line-height: 12px;
            width: 100px;
            span {
              display: inline-block;
              width: 13px;
              height: 13px;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }
          .card1EchartItem_c {
            width: 80px;
            margin-left: 20px;
            margin-right: 20px;
            span {
              margin-right: 6px;
            }
          }
        }
      }
    }
    .card2Box {
      .wordOrderItem {
        width: 280px;
        height: 190px;
        border-radius: 3px;
        margin-top: 38px;
        .content {
          width: 220px;
          z-index: 5;
        }
        .card_shadow {
          width: 152%;
          top: -10%;
          left: -26%;
          z-index: 0;
        }
      }
      .wordOrderItem:nth-child(1) {
        background-image: linear-gradient(to right, #5a78fd, #c87afd);
      }
      .wordOrderItem:nth-child(2) {
        background-image: linear-gradient(to right, #3daef6, #737bfc);
      }
      .wordOrderItem:nth-child(3) {
        background-image: linear-gradient(to right, #41d79c, #a7e25f);
      }
    }
    .orderStateItem {
      width: calc(100% - 180px / 7);
    }
    .orderStateItem:first-child {
      padding-left: 0;
    }
    .orderStateItem:last-child {
      border-right: 0;
    }
    .card8Box,
    .card9Box,
    .card11Box {
      height: 500px;
      .card8Echart,
      .index_card5Echart,
      .card9Echart,
      .card11Echart {
        width: 1620px;
        height: 400px;
      }
    }
  }
  .modular_2 {
    .el-card {
      width: 100%;
      height: 100%;
    }
    .card1 {
      height: 400px;
      .bumen_card1Echart {
        width: 1620px;
        height: 340px;
      }
    }
    .card2 {
      width: 760px;
      height: 550px;
      .bumen_card2Echart {
        width: 700px;
        height: 500px;
      }
    }
    .card3 {
      width: 900px;
      height: 550px;
      .title_l_bg {
        left: 4px !important;
      }
      .bumen_card3Echart {
        width: 300px;
        height: 300px;
      }
      .card3EchartList {
        padding-right: 100px;
        margin-left: 110px;
        .card3EchartItem_l {
          line-height: 12px;
          width: 150px;
          span {
            display: inline-block;
            width: 13px;
            height: 13px;
            border-radius: 100%;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .card3EchartItem_c {
          margin-left: 20px;
          margin-right: 20px;
          span {
            margin-right: 6px;
          }
          .card3EchartItem_c_l,
          .card3EchartItem_c_r {
            width: 120px;
            .trendImg {
              width: 10px;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
  .company {
    top: 60px;
    left: 30px;
  }
  .card6Box {
    width: 810px;
    height: 380px;
    .card1 {
      .index_card1Echart {
        width: 400px;
        height: 350px;
      }
      .card1EchartList {
        .card1EchartItem_l {
          line-height: 12px;
          width: 100px;
          span {
            display: inline-block;
            width: 13px;
            height: 13px;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .card1EchartItem_c {
          width: 80px;
          margin-left: 20px;
          margin-right: 20px;
          span {
            margin-right: 6px;
          }
        }
      }
    }
  }
  .card7Box {
    width: calc(100% - 810px - 20px);
    height: 380px;
    overflow: visible;
    .replatItem {
      min-height: 32px;
      .title {
        width: 100%;
        margin-bottom: 6px;
      }
      .repeatContentBox {
        bottom: 30px;
        .sanjiao_down {
          bottom: -20px;
          border-top: 20px solid rgba(0, 0, 0, 0.8);
        }
      }
    }
  }
  .cardTitleBox {
    .cardMore {
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.title_color {
  color: #9884ff;
}
.echartLegendList {
  right: 50px;
  top: 35px;
  .echartLegendItem {
    span {
      width: 10px;
      height: 10px;
    }
  }
  .echartLegendItem:nth-child(1) {
    span {
      background: #fd942d !important;
    }
  }
  .echartLegendItem:nth-child(2) {
    span {
      background: #ff3b3b !important;
    }
  }
}
.line_he {
  line-height: 1.2;
}
.cardTitleBox {
  .cardMore {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
.maskBox {
  .closeMask {
    right: 10px;
    top: 10px;
    .el-icon-close {
      font-size: 32px;
    }
  }
  .maskContent {
    height: 90%;
    overflow-y: scroll;
    .hotEventsItem {
      .repeatContentBox {
        z-index: 999;
        .repeatContent {
          -webkit-line-clamp: 6;
        }
        .sanjiao_down {
          top: -20px;
          border-bottom: 20px solid rgba(0, 0, 0, 0.8);
        }
      }
    }
  }
  .Pagination {
    position: absolute;
    right: 30px;
    bottom: 20px;
  }
}
</style>
<style lang="less">
.bjlBox {
  .contentItem {
    padding-top: 30px;
    margin-right: 30px;
    width: calc((100% - 300px) / 6);
    margin-left: 30px;
  }
  .contentItem:nth-child(6) {
    margin-right: 0;
  }
  .contentItem:nth-child(1) {
    margin-left: 0;
  }
  .contentItem:nth-child(1) {
    .el-progress-bar__inner {
      background-image: linear-gradient(to right, #9162ff, #e72fe7) !important;
    }
    .round {
      border-color: #d4bdff;
    }
  }
  .contentItem:nth-child(2) {
    .el-progress-bar__inner {
      background-image: linear-gradient(to right, #2f81ed, #2ee6d9) !important;
    }
    .round {
      border-color: #b7ebe2;
    }
  }
  .contentItem:nth-child(3) {
    .el-progress-bar__inner {
      background-image: linear-gradient(to right, #40d9e3, #58fdcf) !important;
    }
    .round {
      border-color: #b7ebe2;
    }
  }
  .contentItem:nth-child(4) {
    .el-progress-bar__inner {
      background-image: linear-gradient(to right, #29cd53, #b0e82f) !important;
    }
    .round {
      border-color: #abebb7;
    }
  }
  .contentItem:nth-child(5) {
    .el-progress-bar__inner {
      background-image: linear-gradient(to right, #fc1e86, #ea2dc1) !important;
    }
    .round {
      border-color: #fda5ce;
    }
  }
  .contentItem:nth-child(6) {
    .el-progress-bar__inner {
      background-image: linear-gradient(to right, #ee8926, #eeba26) !important;
    }
    .round {
      border-color: #f8d0a8;
    }
  }
  .contentItem:nth-child(6) .line {
    display: none;
  }
}

.flexrt {
  padding: 0;
  display: flex;
  direction: rtl;
}
.card3Box {
  .el-card__body {
    padding: 10px;
  }
}
.bord_5 {
  border-left: 5px #3e7eea solid;
}
.resetBtn:hover,
.resetBtn:focus {
  background: #8962ff !important;
  border-color: #8962ff !important;
  color: #fff !important;
}
.card1_l {
  .el-progress-bar__outer {
    width: 180px;
  }
  .el-progress-bar__inner {
    background-image: linear-gradient(to right, #8b0cd9, #7770d5) !important;
  }
}
.complete {
  .el-progress-circle__track {
    stroke: #f4f7f9;
  }
}
.wordOrderItem:nth-child(1) {
  .el-progress-bar__outer {
    background: #dbbcfe;
  }
  .el-progress-bar__inner {
    background-image: linear-gradient(to right, #879bff, #f2f7f9) !important;
  }
}
.wordOrderItem:nth-child(2) {
  .el-progress-bar__outer {
    background: #b2c5fd;
  }
  .el-progress-bar__inner {
    background-image: linear-gradient(to right, #6bbefb, #f2f7f9) !important;
  }
}
.wordOrderItem:nth-child(3) {
  .el-progress-bar__outer {
    background: #c5efb8;
  }
  .el-progress-bar__inner {
    background-image: linear-gradient(to right, #6cdc85, #f2f7f9) !important;
  }
}
.orderStateItem {
  .el-progress-bar__inner {
    background-image: linear-gradient(to right, #3183ed, #66d4fd) !important;
  }
}
.dissatisfied {
  .dissatisfied_1 svg > path:nth-child(2) {
    stroke: url(#dissatisfied1);
  }
  .dissatisfied_2 svg > path:nth-child(2) {
    stroke: url(#dissatisfied2);
  }
  .dissatisfied_3 svg > path:nth-child(2) {
    stroke: url(#dissatisfied3);
  }
  .dissatisfied_4 svg > path:nth-child(2) {
    stroke: url(#dissatisfied4);
  }
  .dissatisfied_5 svg > path:nth-child(2) {
    stroke: url(#dissatisfied5);
  }
}
.hotEvents {
  .el-progress-bar__inner {
    background-image: linear-gradient(to right, #2f81ed, #2ee7d9) !important;
  }
}
.card10Box {
  .shadow {
    width: 150px;
    height: 150px;
    left: 3px;
    top: 3px;
    border-radius: 100%;
  }
  .dissatisfied_1 .shadow {
    -webkit-animation: shineRed1 1 forwards;
  }
  .dissatisfied_2 .shadow {
    -webkit-animation: shineRed2 1 forwards;
  }
  .dissatisfied_3 .shadow {
    -webkit-animation: shineRed3 1 forwards;
  }
  .dissatisfied_4 .shadow {
    -webkit-animation: shineRed4 1 forwards;
  }
  .dissatisfied_5 .shadow {
    -webkit-animation: shineRed5 1 forwards;
  }
}
@-webkit-keyframes shineRed1 {
  0% {
    -webkit-box-shadow: 0 0 15px #8073ff;
  }
  50% {
    -webkit-box-shadow: 0 0 15px #7d80ff;
  }
  75% {
    -webkit-box-shadow: 0 0 15px #c23bfd;
  }
  100% {
    -webkit-box-shadow: 0 0 15px #c03cfd;
  }
}
@-webkit-keyframes shineRed2 {
  0% {
    -webkit-box-shadow: 0 0 15px #75bfff;
  }
  100% {
    -webkit-box-shadow: 0 0 15px #463cfd;
  }
}
@-webkit-keyframes shineRed3 {
  0% {
    -webkit-box-shadow: 0 0 15px #f773ff;
  }
  100% {
    -webkit-box-shadow: 0 0 15px #fd3b91;
  }
}
@-webkit-keyframes shineRed4 {
  0% {
    -webkit-box-shadow: 0 0 15px #ff767e;
  }
  100% {
    -webkit-box-shadow: 0 0 15px #fdaa3c;
  }
}
@-webkit-keyframes shineRed5 {
  0% {
    -webkit-box-shadow: 0 0 15px #6fee8c;
  }
  100% {
    -webkit-box-shadow: 0 0 15px #36ecd9;
  }
}
.maskBox {
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: #f5f5f5;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #7e7d7d;
  }
}
.overdue > .el-input > input {
  // border: none;
}
</style>
